<div class="row">
    <div class="col-xs-12">

        <form action="" method="POST" class="form-search">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <td class="col-xs-3 col-sm-1">
                        <select id="search_type" name="search_type">
                            <option value="id" {{if eq "id" .search_type}}selected="selected"{{end}}>序号ID</option>
                            <option value="name" {{if eq "name" .search_type}}selected="selected"{{end}}>小说名</option>
                            <option value="author" {{if eq "author" .search_type}}selected="selected"{{end}}>作者</option>
                        </select>
                    </td>

                    <td class="col-xs-3 col-sm-2">
                        <input type="text" name="search_word" value="{{.search_word}}" placeholder="关键词">
                    </td>

                    <td colspan="80">
                        <input type="button" name="search" onclick="go_search('index');" value="查询" class="btn btn-purple btn-sm"/>
                    </td>
                </tr>
            </table>
            <script type="text/javascript">
                function go_search($ac){
                    $('.form-search').attr('action',$ac).submit();
                }
            </script>
        </form>


        <div class="table-responsive">
            <table id="function-table"
                   class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th class="col-sm-1">序号</th>
                    <th class="col-sm-1">来源ID</th>
                    <th class="col-sm-1">小说名</th>
                    <th class="col-sm-1">小说作者</th>
                    <th class="col-sm-1">最新章节</th>
                    <th class="col-sm-1">章节</th>
                    <th class="col-sm-2">更新时间</th>
                    <th class="col-sm-1">状态</th>
                    <th class="col-sm-2">操作</th>
                    <th class="col-sm-1">其他操作</th>
                </tr>
                </thead>


                <tbody>
                    {{range  $k, $v := .list}}
                    <tr>
                        <td>{{$v.Id}}</td>
                        <td>{{$v.FromId}}</td>
                        <td><span class="btn btn-sm" data-rel="tooltip" title="{{$v.Desc}}" data-original-title="">{{$v.Name}}</span></td>
                        <td>{{$v.Author}}</td>
                        <td><a target="_blank" href="{{$v.LastChapterUrl}}" class="label label-success arrowed" data-rel="tooltip" title="{{$v.LastChapter}}">查看</a></td>
                        <td><a title="共{{$v.ChapterNum}}章节" data-rel="tooltip" value="{{$v.List}}" href="javascript:;" onclick="lookChapter(this);" class="btn btn-purple btn-sm">查看</a></td>
                        <td>{{$v.UpdateTime}}</td>
                        <td>
                            {{if eq 1 $v.Status}}
                            <a class="blue" href="javascript:req('/{{adminPath}}/{{$.curController}}/lock?id={{$v.Id}}')">
                                <span title="点击锁定" class="badge badge-warning">正常</span></a>
                            {{else}}
                            <a class="blue" href="javascript:req('/{{adminPath}}/{{$.curController}}/lock?id={{$v.Id}}')">
                                <span title="点击解锁" class="badge">锁定</span></a>
                            {{end}}
                        </td>
                        <td>
                            <div class="action-buttons">
                                <a class="blue" title="编辑" href="/{{adminPath}}/{{$.curController}}/add?id={{$v.Id}}">
                                    <i class="fa fa-pencil bigger-130"></i>
                                </a>
                                {{if eq 1 $v.Status}} 
                                <a class="blue" title="点击锁定" href="javascript:req('/{{adminPath}}/{{$.curController}}/lock?id={{$v.Id}}')">
                                    <i class="fa fa-unlock bigger-130"></i>
                                </a> 
                                {{else}} 
                                <a class="blue" title="点击解锁" href="javascript:req('/{{adminPath}}/{{$.curController}}/lock?id={{$v.Id}}')">
                                <i class=" fa fa-lock bigger-130"></i>
                                </a> 
                                {{end}}
                                <a class="blue" title="删除"
                                   href="javascript:req('/{{adminPath}}/{{$.curController}}/del?id={{$v.Id}}')">
                                    <i class="fa fa-trash-o bigger-130"></i>
                                </a>
                            </div>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <a class="blue" title="章节重新爬取"
                                   href="javascript:req('/{{adminPath}}/{{$.curController}}/spider?id={{$v.Id}}')">
                                    <i class="fa fa-bolt bigger-130"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="dataTables_paginate paging_bootstrap">{{str2html .pageLink}}</div>
    </div>
</div>


<!-- 章节信息查看 -->
<div id="dialog-message-chapter" class="hide">
    <div class="col-sm-4 center">121</div>
    <div class="col-sm-4 center">11</div>
    <div class="col-sm-4 center">11</div>
</div>
<!-- 章节信息查看 -->
<style type="text/css">

.chapter_l{
    border-top:1px dashed gray;
    border-left:1px dashed gray;
    overflow:hidden;
    white-space: nowrap;
    font-size:14px;
    text-overflow: ellipsis;
}

.chapter_r{
    border-top:1px dashed gray;
    border-left:1px dashed gray;
    border-right:1px dashed gray;
    overflow:hidden;
    white-space: nowrap;
    font-size:14px;
    text-overflow: ellipsis;
}

.chapter_3{
    border-top:1px dashed gray;
    border-left:1px dashed gray;
    border-bottom:1px dashed gray;
    overflow:hidden;
    white-space: nowrap;
    font-size:14px;
    text-overflow: ellipsis;
}

.chapter_a{
    border:1px dashed gray;
    overflow:hidden;
    white-space: nowrap;
    font-size:14px;
    text-overflow: ellipsis;
}
</style>
<script>

var timeSign;
function lookChapter(o){
    //console.log($(o));
    var value = $(o).attr('value');
    var data = $.parseJSON(value);

    var content = "";
    var cols = 3;
    var rowCount = Math.ceil(data.length/cols);
    var modelNum = data.length%cols;
    var rowLastNotClose = cols - modelNum;
    
    var strArr = new Array();
    var time_start =  (new Date()).getTime();
    for (i in data){
        var className = "chapter_l";
        var n = parseInt(1 + parseInt(i));
        var nowRowNum = Math.ceil(n/cols);
        var colsModel = i%cols;

        // console.log(colsModel, rowLastNotClose);
        if (  modelNum != 0){
            if ( colsModel == cols-1 && nowRowNum != rowCount - 1) {
                className = "chapter_r";
            } else if ( colsModel > modelNum-1 && nowRowNum == rowCount - 1 
                && colsModel != cols-1){
                className = "chapter_3";
            } else if (colsModel > modelNum-1 && nowRowNum == rowCount - 1 
                && colsModel == cols-1){
                className = "chapter_a";
            }else if (nowRowNum == rowCount && (i != data.length-1) ) {
                className = "chapter_3";
            } else if (i == data.length - 1 ){
                className = "chapter_a";
            }
        } else {
            if ( colsModel == cols-1 && (i != data.length-1)) {
                className = "chapter_r";
            } else if (nowRowNum == rowCount && (i != data.length-1)){
                className = "chapter_3";
            } else if (i == data.length - 1 ){
                className = "chapter_a";
            }
        }

        // strArr.push('<div class="col-sm-4 center ');
        // strArr.push(className);
        // strArr.push('"><a data-rel="tooltip" target="_blank" href="');
        // strArr.push(data[i]["url"]);
        // strArr.push('" title="');
        // strArr.push(data[i]["name"]);
        // strArr.push('">');
        // strArr.push(data[i]["name"] );
        // strArr.push('</a></div>');

        content += '<div class="col-sm-4 center '+ className +'"><a data-rel="tooltip" target="_blank" href="'
            + data[i]["url"]+ '" title="'
            + data[i]["name"] 
            +'">'
            + data[i]["name"] 
            +'</a></div>';
    }
    
    // var content = strArr.join('');

    clearTimeout(timeSign);
    var dialog = $( "#dialog-message-chapter" ).html('').removeClass('hide').dialog({
        modal: true,
        title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i>章节查看</h4></div>",
        title_html: true,
        width:800,
        height:500,
        buttons: [{
            text: "OK",
            "class" : "btn btn-primary btn-minier",
            click: function() {
                $( this ).dialog( "close" );
                timeSign = setTimeout(function(){
                    $( "#dialog-message-chapter" ).html("");
                },1);
            } 
        }]
    }).html(content).on( "dialogclose", function( event, ui ) {
        timeSign = setTimeout(function(){
            $( "#dialog-message-chapter" ).html("");
        },1);
    } );

    var time_end =  (new Date()).getTime();
    console.log("时间消耗:",time_end-time_start);

    $('[data-rel=tooltip]').tooltip();
}

jQuery(function($) {
});
</script>
